(function () {
    // var oControllerStyles = `position:relative;`;
    // var oControllerXLine = `display:none;position:absolute;width:100%;height:.5px;border-bottom:1px solid red;left:0;`;
    // var oControllerYLine = `display:none;position:absolute;width:.5px;height:100%;border-left:1px solid red;top:0;`;
    function Charts(el) {
        this.el = typeof el === 'string' ? document.querySelector(el) : el;
    }
    Charts.config = {
        type: 'line',
        drakMode: false,
        font: '25px serif',
        lineColor: 'orange',
        lineWidth: 1,
        XAxisColor: 'orange',
        YAxisColor: 'orange',
        gridColor: 'gray',

        /**以下配置不要动 */
        //xy需要等值
        drawStartPoints: {
            x: 30,
            y: 30
        },
        //是绘制起始点X或者y的2倍
        drawCenter: 60,
        //value在折线上面的偏移量
        textOffsetPoint: 15
    }
    Charts.prototype = {
        init: function () {
            var oCanvas = document.createElement('canvas'),
                thisElWidth = this.el.clientWidth,
                thisElHeight = this.el.clientHeight,
                oController = document.createElement('div'),
                oYLine = document.createElement('div'),
                oXLine = document.createElement('div');


            // oController.setAttribute('style', oControllerStyles);
            // oXLine.setAttribute('style', oControllerXLine);
            // oYLine.setAttribute('style', oControllerYLine);

            oCanvas.width = thisElWidth;
            oCanvas.height = thisElHeight;

            oController.width = thisElWidth;
            oController.height = thisElHeight;
            oController.className = 'chart_controller';

            this.oCanvas = oCanvas;
            this.oController = oController;
            this.oYLine = oYLine;
            this.oXLine = oXLine;

            this.thisElWidth = thisElWidth;
            this.thisElHeight = thisElHeight;

            this.render();
            this.oController.appendChild(this.oCanvas);
            // this.oController.appendChild(oYLine);
            // this.oController.appendChild(oXLine);
            this.el.appendChild(this.oController);
            this.bindEvent();
        },
        bindEvent: function () {
        },
        render: function () {
            var ctx = this.oCanvas.getContext('2d');
            switch (Charts.config.type) {
                case 'line':
                    this.drawLine(ctx);
                    break;
                case 'pie':
                    this.drawPie(ctx);
                    break;
                default:
                    this.drawLine(ctx);
                    break;
            }
        },
        drawLine: function (ctx) {
            var parmes = this.getDrawParmes();
            //绘制XY轴
            ctx.lineWidth = 7;
            ctx.strokeStyle = 'orange';
            ctx.lineCap = 'square';
            //X主轴
            ctx.beginPath();
            ctx.moveTo(parmes.XY_startPoints.x, parmes.XY_startPoints.y);
            ctx.lineTo(parmes.X_endPoints.x, parmes.X_endPoints.y);
            ctx.stroke();
            //Y主轴 
            ctx.beginPath();
            ctx.moveTo(parmes.XY_startPoints.x, parmes.XY_startPoints.y);
            ctx.lineTo(parmes.Y_endPoints.x, parmes.Y_endPoints.y);
            ctx.stroke();
            //绘制X轴上面的步长标记点
            this._drawStepAndText('X', ctx, parmes);
            this._drawStepAndText('Y', ctx, parmes);
            this._drawDataLine(ctx, parmes);
        },
        /**
         * 绘制数据折线 没有问题
         */
        _drawDataLine: function (ctx, parmes) {
            var xys = this._dataToTrueXY(parmes),
                item,
                _this = this,
                textOffset = 10;
            ctx.beginPath();
            ctx.moveTo(xys[0].x, xys[0].y);
            for (var i = 0; i < xys.length; i++) {
                item = xys[i];
                (function (i, item) {
                    setTimeout(() => {
                        ctx.lineTo(item.x, item.y);
                        ctx.fillText(_this.data.data[i].value, item.x + textOffset, item.y - textOffset);
                        ctx.stroke();
                    }, i * 200);
                })(i, item)
            }
        },
        /**
         * 数据转换成真实的XY值
         */
        _dataToTrueXY(parmes) {
            var res = [],
                item,
                data = this.data.data,
                XAxisindex,//拿到数据中和X轴数据中对应的下标
                xstep = parmes.x_step,
                ystep = parmes.y_step,
                ytag = parmes.y_step_tag;
            for (var i = 0; i < data.length; i++) {
                item = data[i];
                XAxisindex = this.data.xAxis.indexOf(item.xAxis) + 1;
                var temp = {
                    x: XAxisindex * xstep,
                    y: (ystep * data.length) - ystep * (item.value / ytag) + ystep
                }
                res.push(temp);
            }
            return res;
        },
        /**
         * 折线图绘制步长和文本
         * @param {*} tag 
         * @param {*} ctx 
         * @param {*} len 
         * @param {*} parmes 
         */
        _drawStepAndText: function (tag, ctx, parmes) {
            var YAxisMax = parmes.xAxisLength * parmes.y_step;
            ctx.beginPath();
            ctx.lineCap = 'square';
            ctx.fillStyle = 'white';
            for (var i = 1; i < parmes.xAxisLength + 1; i++) {
                if (tag.toUpperCase() == 'X') {
                    ctx.beginPath();
                    ctx.lineWidth = Charts.config.lineWidth;
                    var tempX = i * parmes.x_step;
                    ctx.moveTo(tempX, parmes.X_endPoints.y);
                    ctx.strokeStyle = Charts.config.gridColor;
                    ctx.lineTo(tempX, Charts.config.drawStartPoints.y);
                    ctx.fillText(this.data.xAxis[i - 1], tempX - Charts.config.textOffsetPoint, (parmes.X_endPoints.y + parmes.stepWidth + Charts.config.textOffsetPoint));
                    ctx.stroke();
                    ctx.strokeStyle = Charts.config.XAxisColor;
                } else if (tag.toUpperCase() == 'Y') {
                    ctx.beginPath();
                    ctx.lineWidth = Charts.config.lineWidth;
                    var tempY = (i + 1) * parmes.y_step;
                    ctx.strokeStyle = Charts.config.gridColor;
                    ctx.moveTo(parmes.xAxisLength * parmes.y_step, tempY);
                    ctx.lineTo(parmes.Y_endPoints.x, tempY);
                    ctx.fillText(Math.round(parmes.y_step_tag * parmes.yAxisLength - parmes.y_step_tag * i), 0, tempY);
                    ctx.stroke();
                    ctx.strokeStyle = Charts.config.YAxisColor;
                }
            }
            ctx.fillStyle = '';
        },
        getMaxYaxis: function (data) {
            if (!data) {
                throw TypeError('data not is array');
            }
            var max = 0,
                item;
            for (var index in data) {
                item = data[index];
                max = max > item.value ? max : item.value;
            }
            return max;
        },
        /**
         * 绘制参数
         * 包括起始点、结束点、X轴步长、Y轴步长
         * 
         * @returns object
         */
        getDrawParmes: function () {
            var fn = function (num, len) {
                var n = num / len;
                // if (n % 5 > 0) {
                //     n = n - (n % 5);
                // }
                // if (n < 100) {
                //     return n < 50 ? 50 : n;
                // }

                // if (n % 50 > 0) {
                //     n = n - (n % 50);
                // }
                // if (n < 1000) {
                //     return n;
                // }
                return num / len;
            }
            var xAxisLength = this.data.xAxis.length,//X轴数据长度
                yAxisLength = this.data.data.length,
                max_yAxis = this.getMaxYaxis(this.data.data) > this.thisElHeight ? this.getMaxYaxis(this.data.data) : this.thisElHeight,//从数据中找到最大的Y轴上数据点
                XY_startPoints = { x: Charts.config.drawStartPoints.x, y: this.thisElHeight - Charts.config.drawStartPoints.y },//XY轴共同的绘制起始点
                X_endPoints = { x: this.thisElWidth - Charts.config.drawCenter, y: this.thisElHeight - Charts.config.drawCenter / 2 },//X轴绘制结束点
                Y_endPoints = { x: Charts.config.drawStartPoints.x, y: Charts.config.drawStartPoints.y },//Y轴绘制结束点
                x_step = Math.floor((this.thisElWidth - Charts.config.drawCenter) / xAxisLength),//X轴，绘制月份+小竖线分割标志

                y_step = Math.floor((this.thisElHeight - Charts.config.drawCenter) / yAxisLength),//Y轴步长
                y_step_no_floor = (this.thisElHeight - Charts.config.drawCenter) / yAxisLength,//Y轴步长
                y_step_tag = fn(max_yAxis, yAxisLength),//Y轴每个步长文本点
                stepWidth = 10;
            return {
                xAxisLength,
                yAxisLength,
                max_yAxis: max_yAxis,
                XY_startPoints: XY_startPoints,
                X_endPoints: X_endPoints,
                Y_endPoints: Y_endPoints,
                x_step: x_step,
                y_step: y_step,
                y_step_no_floor,
                y_step_tag,
                stepWidth
            }
        },
        drawPie: function (ctx) {
            
        },
        setOption: function (data) {
            this.data = data;
            this.init();
        }
    }
    window.Charts = Charts;
})()